<template>
 <div class="baseuserrole">
     <!-- 按钮 -->
     <div class="btns">
      <el-form size="small" inline style="text-align:center">
        <el-form-item label="用户" >
          <el-input v-model="param.id"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="loadBaseUser">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-button size="small" type="primary" icon="el-icon-upload2" @click="toAddHandler">新增</el-button>
      <el-button size="small" type="success" icon="el-icon-upload2" @click="downloadHandler">导出</el-button>
    </div>

     <!-- /按钮 --> 
     <!-- {{baseuserroles}} -->
     <!-- 表格 -->
         <el-table size="small" :data="baseuserroles">
      <el-table-column type="index" :index="1" label="序号"></el-table-column>
         <el-table-column label="用户" prop="id" align="center"></el-table-column>
         <el-table-column label="用户ID" prop="userId" align="center"></el-table-column>
         <el-table-column label="管理员ID" prop="roleId" align="center"></el-table-column>
         <el-table-column label="操作" width="200" align="center">
        <!-- 定制-插槽 -->
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="editHandler(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteHandler(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
     </el-table>
     <!-- /表格 -->
</div>
</template>

<script>
import {del,get,post} from '@/utils/request'
export default {
    //页面数据
    data(){
        return{
            param:{},
            baseuserroles:[]
        }
    },
    //页面渲染的时候会调用的函数
    created(){
        this.loadBaseUser();
    },
    methods: {
      downloadHandler(){
      window.location.href = "http://localhost:8888/module/download?name="+this.param.id
    },
    //跳转修改页面
    editHandler(row) {
      this.$router.push({
        path: "/baseuserrole/create", //跳转的路由（前端）
        query: row, // 携带参数
      });
    },
    deleteHandler(row){
     this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "http://localhost:8888/baseUserRole/deleteById";
        del(url, { id: row.id }).then((resp) => {
          this.$message({ type: "success", message: resp.message });
          this.loadBaseUser();
        });
      });
    },
    //跳转
    toAddHandler() {
      this.$router.push("/baseuserrole/create");
    },
    //查询后台的信息
    loadBaseUser() {
      let url = "http://localhost:8888/baseUserRole/query";
      get(url, this.param).then((resp) => {
        this.baseuserroles = resp.data;
      });
    },
  },
};
</script>
<style scoped>
.btns{
    margin-bottom: .5em;
}
</style>>